<template>
  <div :class="{'logdiv':showModal}">
    <div class="div__1" :class="{'div__d':showModal}">
      <div class="div__2">
        <h1>账号登陆</h1>
        <div class="div__3">
          <div class="div__7">
            <div class="div__8">
              <div class="div__9">
                <input class="input__11" type="text" v-model="userName" v-on:input="dlif()" @keyup="delete dlif()"
                       placeholder="请输入用户名" autocomplete="off">
              </div>
            </div>
            <div class="div__10">
              <div class="div__11">
                <div class="div__12">
                  <input autocomplete="off" class="input__22" v-model="passwordLog" @keyup="delete dlif()"
                         v-on:input="dlif()" placeholder="请输入密码" type="text">
                </div>
              </div>
            </div>
            <div class="div__13">
              <div class="div__14">忘记密码</div>
            </div>
            <div class="div__15" @click="commit_dl()" :class="logstyle?logstyle1:logstyle0">登录</div>
            <div class="div__16">
              <div class="div__17">隐私政策</div>
              <div class="div__18" @click="register()">注册账号</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--    <div class="mask" v-if="showModal" @click="showModal=false">dsfdsfsdfsdfdsfsd</div>-->
    <div class="pop" v-if="showModal">
      <button @click="showModal=false" class="btn"></button>
      <slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail"
                    @refresh="onRefresh" :slider-text="text" :imgs="imgs" :accuracy="accuracy">
      </slide-verify>
      <div>{{msg}}</div>
      <!--      <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>-->
    </div>

  </div>
</template>

<script>
  /**/
  import {requestVerify} from "../../network/home";
  //验证图片
  import img0 from '../../assets/img/login/popover/img.jpg';
  import img1 from '../../assets/img/login/popover/img1.jpg';
  import img2 from '../../assets/img/login/popover/img2.jpg';
  import img3 from '../../assets/img/login/popover/img3.jpg';
  import img4 from '../../assets/img/login/popover/img4.jpg';
  import img5 from '../../assets/img/login/popover/img5.jpg';

  import slideVerify from './popover/slide-verify'

  import {mapActions} from "vuex"

  export default {
    name: "Log",
    data() {
      return {
        userName: '',
        passwordLog: '',
        users: {},
        //样式选择
        logstyle1: 'logstyle1',
        logstyle0: 'logstyle0',
        logstyle: false,
        //是否弹出层
        showModal: false,
        //验证状态
        verifyIf: false,
        msg: '',
        text: '向右滑动->',
        imgs: [
          img0,
          img1,
          img2,
          img3,
          img4,
          img5,
        ],
        accuracy: 1, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      }
    },
    components: {
      slideVerify
    },
    computed: {},
    methods: {
      ...mapActions({
        "addData": "UserMsg/addMsg",
        "updateLogStatus": "UserMsg/updateLogStatus"
      }),
      register() {//跳转到注册
        this.$router.push("/sign");
      },
      //验证事件
      onSuccess(times) {
        console.log('验证通过');
        this.msg = `耗时${(times / 1000).toFixed(1)}s`;
        //弹出框隐藏;
        setTimeout(() => {
          this.showModal = false;
        }, 2000);
        //发送请求给后台
        requestVerify(this.$data.userName, this.$data.passwordLog).then(data => {
          if (data.data != "") {
            this.users = data.data;
            this.$message.success("登陆成功!");
            this.$router.push({path: "home"})
            //将数据添加到vuex
            this.addData({...data.data,logStatus: true});
            //同时也将数据添加到sessionStorage
            sessionStorage.setItem("userMsg",JSON.stringify({...data.data,logStatus: true}));
            //修改登录状态
            this.updateLogStatus(true);
            //登陆成功之后刷新一次页面
            //this.$router.go(0)
          } else {
            this.$message.error("登陆失败，账号或密码错误!");
          }
        }).catch(data => {
          this.$message.error("登陆失败，系统发生故障!");
        })
      },
      onFail() {
        console.log('验证不通过');
        this.msg = ''
      },
      onRefresh() {
        console.log('点击了刷新小图标');
        this.msg = ''
      },
      onFulfilled() {
        console.log('刷新成功啦！');
      },
      onAgain() {
        console.log('检测到非人为操作的哦！');
        this.msg = 'try again';
        // 刷新
        this.handleClick();
      },
      handleClick() {
        this.$refs.slideblock.reset();
        this.msg = ''
      },

      //登录点击事件
      commit_dl() {
        if (this.$data.logstyle == true) {
          this.showModal = true;

        }
        ;
      },
      dlif() {
        if (this.userName != '' && this.passwordLog != '') {
          this.$data.logstyle = true;
        } else {
          this.$data.logstyle = false;
        }
      },
    },

  }
</script>

<style>

  div.div__d {
    background: silver;
  }

  div.logdiv {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .btn {
    width: 10px;
    height: 20px;
    margin-left: 258px;
    margin-top: 5px;
    position: absolute;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("../../assets/img/login/popover/icon_light.png");
    background-position: -96px -77px;
  }

  .btn:active {
    box-shadow: 1px 5px 0 rgba(0, 0, 0, 0.1) inset;
  }

  .pop {
    background-color: #fff;

    position: fixed;
    /*width: calc(100% - 514px);
    height:calc(100% - 500px);*/
    z-index: 2;
    width: 310px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -155px;
    margin-top: -125px;
  }

  .btn {
    /*background-color: #fff;*/
    border-radius: 4px;
    border: 0px;
    padding: 4px 12px;
  }

  .logstyle1 {
    cursor: pointer;
  }

  .logstyle0 {
    opacity: .3;
    cursor: not-allowed;
  }

  html {
    background-size: 100%, 100%;
    background-color: red;
    background-image: url("../../assets/img/login/login-bg.56a249bc.png");
  }

  .div__1 {
    background-color: white;
    width: 380px;
    height: 510.4px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -255.2px;
  }

  .div__2 {
    width: 300px;
    height: 430.4px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -215.2px;
  }

  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .div__3 {
    width: 300px;
    height: 239px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -119.5px;
  }

  .div__7 {
    width: 300px;
    height: 185px;
  }

  .div__8, .div__10 {
    width: 300px;
    height: 55px;
  }

  .div__9 {
    width: 300px;
    height: 45px;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 45px;
    background: #f7f7f7;
    border-radius: 9px;
    overflow: hidden;
  }

  .input__11, .input__22 {

    background: none;
    border-radius: 9px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    width: 100%;
    height: 45px;
    outline: none;
    box-sizing: border-box;
    display: block;
    padding: 10px 15px;
    font-size: 12px;
    color: #000;
    line-height: 25px;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }

  .div__11 {
    webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div__12 {
    width: 100%;
    height: 45px;
    background: #f7f7f7;
    border-radius: 9px;
    overflow: hidden;

    webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div__13 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: .27778rem;
  }

  .div__14 {
    color: rgba(0, 0, 0, .6);
    font-size: .33333rem;
    margin: 0 .08333rem;
    cursor: pointer;
    transition: opacity .34s cubic-bezier(0, 0, .2, 1) 0s;
  }

  .div__15 {
    background-color: #2ad181;
    background-color: rgba(0, 0, 0, .15);
    color: #fff;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #2ad181;
    color: #fff;
    margin: .75rem auto 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    height: 48px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color .4s;
    box-sizing: border-box;
  }

  .div__16 {
    padding: 9px 0 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .div__17 {
    color: rgba(0, 0, 0, .6);
    font-size: 12px;
    cursor: pointer;
    transition: opacity .34s cubic-bezier(0, 0, .2, 1) 0s;
  }

  .div__18 {
    color: rgba(0, 0, 0, .6);
    font-size: 12px;
    cursor: pointer;
    transition: opacity .34s cubic-bezier(0, 0, .2, 1) 0s;
  }
</style>
